<template>
  <!-- 对比 -->
  <div>
  	<div id="poster" ref="imageDom" style="color: #000000;">
  		<div v-for="reportTable,index in newReportTable" :key="index" style="margin-bottom: 20px;">
  			<div v-show="!report" style="display: flex;justify-content: space-between;">
  				<div>
  					<h2 v-if="usageId!=2">{{reportTable.usage}}</h2>
  					<h2 v-else >大纲考核汇总表</h2>
  					<span>{{reportTable.school}}</span>
  				</div>
  				<div>
  					<div>测量日期: {{$moment(reportTable.date).format('YYYY-MM-DD')}}</div>
  					<div>运动项目: {{reportTable.playerDatas[0].sport}}</div>
  					<div v-html="reportTable.playerDatas[0].teacher"></div>
            <div v-show="reportTable.scenario">场景：{{reportTable.scenario}}</div>
  				</div>
  			</div>
  			<hr color="#000000" size="1" v-show="!report">
  			<div style="display: flex;align-items: center;margin: 10px 0;">
  				<div>备注：</div>
  				<div style="width: 20px;height: 20px;background-color: #006633;margin-left:10px;"></div>理想
  				<div style="width: 20px;height: 20px;background-color: #f8f8f8;margin-left:10px;"></div>正常
  				<div style="width: 20px;height: 20px;background-color: #FFCC33;margin-left:10px;"></div>注意
  				<div style="width: 20px;height: 20px;background-color: #FF3300;margin-left:10px;"></div>预警
  				<div style="width: 20px;height: 20px;background-color: #990000;margin-left:10px;"></div>告警
  				<!-- <div style="width: 20px;height: 20px;background-color: #CCCCCC;margin-left:10px;"></div>错误 -->
  			</div>
  			<table class="table" border="1" width="100%" bordercolor="#000000" style="border-collapse: collapse;text-align: center;color: #000000;">
          <thead>
            <tr style="font-weight: bold;height: 35px;">
              <td>指标名称</td>
              <td v-for="item,index in reportTable.playerDatas" :key="index">{{item.playerName}}{{item.playerName?'-':''}}{{item.gender}}</td>
            </tr>
          </thead>
          <tbody>
  					<tr style="height: 35px;" v-for="meta,index_meta in reportTable.meta">

  						<td>{{meta[Object.keys(meta)[0]]}}{{reportTable.refval&&reportTable.refval[Object.keys(meta)[0]]?'(参考值:'+reportTable.refval[Object.keys(meta)[0]]+')':''}}</td>
              <td width="14%" :bgcolor="playerData.datas[Object.keys(meta)[0]]?dict_bgColor[playerData.datas[Object.keys(meta)[0]][Object.keys(playerData.datas[Object.keys(meta)[0]])[0]][0].warnLevel]:(playerData.playerName?'':'')" v-for="playerData ,index_player in reportTable.playerDatas">
  							<span v-if="playerData.datas[Object.keys(meta)[0]]">
  								{{playerData.datas[Object.keys(meta)[0]][Object.keys(playerData.datas[Object.keys(meta)[0]])[0]][0].value}}
  							</span>
  							<span v-else>  </span>
  						</td>
  					</tr>
  				</tbody>
  			</table>
        <div v-show="analysisReport" style="display: flex;">
          <div style="margin-right: 20px;">评价：</div>
          <div v-html="printData.memo||memo"></div>
        </div>
  		</div>
  	</div>
  </div>
</template>

<script>
  export default {
    props: ['printData','usageId','report','pagesize','memo','analysisReport'],
    data() {
      return {
        newReportTable: [],
        date: this.$moment(new Date()).format('YYYY'),
        dict_bgColor: {
        	"理想": "#006633",
        	"正常": "#ffffff",
        	"注意": "#FFCC33",
        	"预警": "#FF3300",
        	"告警": "#990000",
        	"": "#fff",
        	" ": "#fff"
        }
      }
    },
    created() {
      this.init_data()
    },
    watch: {
      printData(val) {
        this.init_data()
      },
    },
    methods: {
      init_data() {
        let pageSize = 6
        let playerDatas = this.group(this.printData.playerDatas,pageSize)
        let data = []
        playerDatas.forEach(item=>{
          data.push(
        		{
        			date: this.printData.date,
        			memo: this.printData.memo,
        			meta: this.printData.meta,
        			playerDatas: item,
        			reval: this.printData.reval,
        			refval: this.printData.refval,
        			scenario: this.printData.scenario,
        			school: this.printData.school,
        			usage: this.printData.usage,
        		}
        	)
        })
        this.newReportTable = data
      },
      group(array, subGroupLength) {
        if(array && array.length!=0){
          let index = 0;
          let newArray = [];
          while (index < array.length) {
            let curArr = array.slice(index, index += subGroupLength)
            if(newArray.length > 0 && curArr.length < subGroupLength){
              curArr = this.arrAdd(curArr,subGroupLength)
            }
          	newArray.push(curArr);
          }
          return newArray;
        }
        return []
      },
      arrAdd(arr,num) {
        if(arr.length<num){
          arr.push({
            birthday: '',
            datas: {},
            emp: '',
            gender: '',
            playerName: '',
            sport: '',
            sportItem: '',
            teacher: '',
            time: '',
          })
          this.arrAdd(arr,num)
        }
        if(arr.length == num){
          return arr
        }
      }
    }
  }
</script>

<style scoped>

</style>
